* {
    padding: 0;
    margin: 0;
}
html , body {
    overflow: hidden;
}
ul , li {
    list-style-type: none;
}
#music {
    width: 0;
    position: absolute;
}
.content {
    position: relative;
    .box {
        position: relative;
        left: 0%;
        // 小鸟 
        .bird {
            width: 54px;
            height: 50px;
            background: url(../images/bird.png) no-repeat;
            background-size: 180px 50px;
            position: absolute;
            right: -1430px;
            top: 30px;
            -webkit-animation-name: bird;
            -webkit-animation-duration: 300ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: steps(1, start);
            -moz-animation-name: bird;
            -moz-animation-duration: 300ms;
            -moz-animation-iteration-count: infinite;
            -moz-animation-timing-function: steps(1, start);
        }
        .door {
            width: 176px;
            height: 160px;
            position: absolute;
            top: 266px;
            right: -65%;
            z-index: 98;
            overflow: hidden;
            img {
                float: left;
                height: 160px;
                width: 88px;
                position: absolute;
            }
            .door_left  {
                left: 0px;
            }
            .door_right  {
                right: 0px;
            }
        }
        .img {
            position: absolute;
            top: -9%;
            left: 0%;
            z-index: -1;
            img {
                float: left;
            }
            
        }
        // 小女孩
        .girl {
            width: 98px;
            height: 194px;
            background: url(../images/girl.png)  -110px -190px;
            background-size: 719px 193px;
            position: absolute;
            right: -157%;
            bottom: 38%;
        }
        // 水 
        .water {
            position: absolute;
            right: -165%;
            width: 400px;
            height: 200px;
            bottom: 0%;
            z-index: 999;
            div  {
                background: url(../images/water.png) no-repeat;
                height: 24px;
                
            }
            .water1 {
                background-position: -152px 8px;
                background-size: 500px 16px;
                width: 78px;
                margin-left: 32%;
                animation: water1 7s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);

            }
            .water2 {
                background-position: -405px 0px;
                background-size: 500px 16px;
                width: 100px;
                margin-left: 56%;
                animation: water2 5s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
            }
            .water3 {
                background-position: 0px 8px;
                background-size: 655px 16px;
                width: 200px;
                margin-left: 0px;
                margin-top: 4px;
                animation: water3 5s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
            }
            .water4 {
                background-position: -260px 0px;
                background-size: 572px 16px;
                width: 204px;
                margin-left: 120px;
                margin-top: 14px;
                animation: water4 8s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
            }

            // 星星们
            .star1 {
                position: absolute;
                top: -210%;
                left: -50%;
                opacity: 1;
                animation: star1 4s infinite ;
            }
            .star2 {
                position: absolute;
                top: -140%;
                left: -62%;  
                opacity: 1;
                animation: star2 10s infinite ;
            }
            .star3 {
                position: absolute;
                top: -223%;
                right: -7%;
                opacity: 1;
                animation: star3 7s infinite ;
            }
            .star4 {
                position: absolute;
                top: -150%;
                right: -16%;
                opacity: 1;
                animation: star4 6s infinite ;
            }
            .star5 {
                position: absolute;
                top: -135%;
                left: -30%;
                opacity: 1;
                animation: star5 10s infinite ;
            }
        }

        // 天上云朵
            > img {
                z-index: 99;
                position: absolute;
                top: 0;
            }
            .cloud1 {
                width: 130px;
                left: 0px;
                top: 60px;
                // animation: cloud_one 10s linear forwards;
            }
            .cloud2 {
                width: 220px;
                right: 0px;
                // animation: cloud_two 10s linear forwards;
            }
            .sun {
                width: 100px;
                left: 595px;
                top:-15px;
                // animation: sun 10s linear forwards;
            }
    }

    // 小男孩
    #boy {
        width: 98px;
        height: 194px;
        background: url(../images/boy.png) 0px -190px;
        background-size: 719px 385px;
        z-index: 99;
        position: absolute;
        bottom: 28%;
        left: 0%;
        // transition: 6s linear;
    }

    // snowflake 飘雪花
    #snowflake {
        position: absolute;
        top: 0;
        .dv {
            position: absolute;
            top: 0px;
            left: 100px;
            transform: rotate(0deg);
            transition: 7s linear;
            z-index: 999;
            img {
                width: 25px;
                height: 25px;
            }
        }
    }
}
// 背景图
@keyframes beijingtu {
    0% {
        left: 0px;
    }
    100% {
        left: -100%;
    }
}

// 小男孩
.slowWalk {
    -webkit-animation-name: person-slow;
    -webkit-animation-duration: 950ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: steps(1, start);
    -moz-animation-name: person-slow;
    -moz-animation-duration: 950ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: steps(1, start);
}
// 小男孩拿花
.charector {
    -webkit-animation-name: person-flower;
    -webkit-animation-duration: 950ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: steps(1, start);
    -moz-animation-name: person-flower;
    -moz-animation-duration: 950ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: steps(1, start);
}

@keyframes person-slow{
    0% {
        background-position: 0px 190px;
    }
    25% {
        background-position: -100px 190px;
    }
    50% {
        background-position: -206px 190px;
    }
    75% {
        background-position: -407px 0px;
    }
    100% {
        background-position: 0px 190px;
    }
}
// 拿花
@keyframes person-flower{
    0% {
        background-position: -200px 384px;
    }
    25% {
        background-position: -510px 384px;
    }
    50% {
        background-position: -310px 384px;
    }
    75% {
        background-position: -610px 384px;
    }
    100% {
        background-position: -200px 384px;
    }
}

@keyframes boyleft {
    0% {
        left: 0px;
    }
    100% {
        left: 100px;
    }
}

// 云朵和太阳
@keyframes cloud_one {
    0% {
        left: 0;
    }
    100% {
        left: 1242px;
    }
}

@keyframes cloud_two {
    0% {
        right: 0;
    }
    100% {
        right: 500px;
    }
}

@keyframes sun {
    0% {
        left: 595px;
        top:-15px;
    }
    100% {
        top: 100px;
        left: 0;
    }
}

// 第二张图的 bird
@keyframes bird {
    0% {
        background-position: 0 0;
    }
    33% {
        background-position: -60px 0
    }
    66% {
        background-position: -120px 0;
    }
    100% {
        background-position: 0px 0px;
    }
}

// 第三张图的水
@keyframes water1 {
    10% {
        margin-left: 32%;
    }
    50% {
        margin-left: 38%;
    }
    60% {
        margin-left: 38%;
    }
    100% {
        margin-left: 32%;
    }
}

@keyframes water2 {
    15% {
        margin-left: 56%;
    }
    50% {
        margin-left: 45%;
    }
    65% {
        margin-left: 45%;
    }
    100% {
        margin-left: 56%;
    }
}

@keyframes water3 {
    25% {
        margin-left: 0px;
    }
    50% {
        margin-left: 30px;
    }
    75% {
        margin-left: 30px;
    }
    100% {
        margin-left: 0px;
    }
}

@keyframes water4 {
    25% {
        margin-left: 120px
    }
    50% {
        margin-left: 150px;
    }
    75% {
        margin-left: 150px;
    }
    100% {
        margin-left: 120px;
    }
}

// 第三张图的星星
@keyframes star1 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes star2 {
    10% {
        opacity: 1;
    }
    20% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes star3 {
    0% {
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes star4 {
    0% {
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes star5 {
    0% {
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

// snowflake 飘雪花 
@keyframes snowflakeRotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes snowflakeTop {
    0% {
        top: 0;
        opacity: 1;
    }
    99% {
        top:600px;
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes snowflakeLeft {
    0% {
        top: 0;
        opacity: 1;
    }
    99% {
        top:600px;
        left: 330px;
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


